import React, { useState, useEffect } from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Empty, Comment, Avatar, Image } from 'antd';
import { replaceImageUrl, replaceContent } from '@/utils';
// css
import styles from '@/styles/CommonDetail.module.scss';
// 组件
import Pagination from '@/pages_components/components/Pagination';
// api
import { productCommentList } from '@/api/common';

export default function MyComment({ goodsId }) {
    
    const [list, setList] = useState([]);
    const [total, setTotal] = useState(0);

    useEffect(() => {
        onPageChange()
    }, []);

    // 获取分页
    function onPageChange (current = 1){
        productCommentList({ current, goodsId }).then(res => {
            const { code, data } = res;
            if (code === 0 && data && data.records) {
                setList([...data.records]);
                setTotal(data.total);
            }
        })
    }

    return (
        <div className={styles['comment']} id="anchor-comment">
            <h1 className={styles['common-title']}>
                <span className="iconfont icon-pingjia"></span> 用户评价
            </h1>
            <article>
                {
                    !list.length
                    ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}  description="暂无用户评价" />
                    : list.map((item, index) => {
                        const { imgUrl } = item;
                        const imgs = imgUrl ? imgUrl.split(',') : [];
                        return (
                            <Comment
                                key={index}
                                className={styles['comment-list']}
                                author={<span className={styles['name']}>{item.nickname}</span>}
                                avatar={
                                    item.headImg
                                    ? <Avatar src={replaceImageUrl(item.headImg)} alt={item.nickname} />
                                    : <Avatar icon={<UserOutlined />} />
                                }
                                datetime={
                                    <>
                                        <span className={styles['time']}>{item.evaluateTime}</span>
                                        <span className={styles['score']}><em>{item.score}分</em>/5分</span>
                                    </>
                                }
                                content={
                                    <div className={styles['content']}>
                                        <p dangerouslySetInnerHTML={{__html: replaceContent(item.description)}}></p>
                                        {
                                            imgs.length
                                            ? <div className={styles['imgs']}>
                                                {
                                                    imgs.map((image, idx) => <Image src={image} key={idx} />)
                                                }
                                            </div>
                                            : ""
                                        }
                                    </div>
                                }
                            />
                        )
                    })
                }
                <Pagination onChange={onPageChange} size={10} total={total} />
            </article>
        </div>
    )
}